<template>
  <el-main>
    <el-card shadow="never" header="打开">
      <el-button type="primary" plain @click="open1">打开个人信息</el-button>
      <el-button type="primary" plain @click="open2">打开后执行</el-button>
      <el-alert title="打开后执行原理: 路由push时,在当前路由对象中插入一个特殊标识, 在目标视图中beforeRouteEnter获取判断是否需要执行特殊方法" style="margin-top: 20px"></el-alert>
    </el-card>
    <el-card shadow="never" header="刷新" style="margin-top: 15px">
      <el-button type="primary" plain @click="refresh1">刷新当前</el-button>
    </el-card>
    <el-card shadow="never" header="关闭" style="margin-top: 15px">
      <el-button type="primary" plain @click="close1">关闭当前</el-button>
      <el-button type="primary" plain @click="close2">关闭其他</el-button>
      <el-button type="primary" plain @click="close3">关闭后执行</el-button>
    </el-card>
    <el-card shadow="never" header="设置" style="margin-top: 15px">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="set1">设置标题</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" header="整页路由" style="margin-top: 15px">
      <el-button type="primary" plain @click="fullpage">fullpage</el-button>
      <el-alert title="变更路由的层级关系,向上推至顶级达到在layout视图中显示. 只需要在路由中设置 meta.fullpage 即可" style="margin-top: 20px"></el-alert>
    </el-card>
  </el-main>
</template>

<script>
import useTabs from '@/utils/useTabs'

export default {
  name: 'viewTags',
  data() {
    return {
      input: 'newTabName',
    }
  },
  mounted() {},
  methods: {
    open1() {
      this.$router.push('/usercenter')
    },
    open2() {
      this.$router.push('/usercenter')
      this.$route.is = true
    },
    refresh1() {
      useTabs.refresh()
    },
    close1() {
      useTabs.close()
    },
    close2() {
      useTabs.closeOther()
    },
    close3() {
      useTabs.closeNext((tags) => {
        //回调返回所有标签的数组，这里其实是需要判断是否含有'/usercenter'，含有再操作的，这里为了演示就直接打开了。
        console.log(tags)
        this.$router.push('/usercenter')
        this.$route.is = true
      })
    },
    set1() {
      useTabs.setTitle(this.input)
    },
    fullpage() {
      this.$router.push('/other/fullpage')
    },
  },
}
</script>

<style></style>
